<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ page isELIgnored="false"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<!doctype html>
<html lang="zh-CN">
<head>
<meta content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" name="viewport" />
<meta charset="utf-8">
<title>50亿感恩活动</title>
<script type="text/javascript" src="./js/flexible.js"></script>
<link rel="stylesheet" href="css/normalize.css" />
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="activity.js"></script>
<script type="text/javascript" src="js/jweixin-1.0.0.js"></script>
<script type="text/javascript">
	$(function() {
		var shareurl = 'http://8.laicunba.com/h5/regist_new.jsp?invite_code=${inviteCode}&mobile=${mobile}&is_noward=' + $(".is_noward").text();
		if($("#channel").val()) {
			shareurl += "&channel=${param.channel}";
		}
		wx.config({
			debug : false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
			appId : '${weiXinVO.appid}', // 必填，公众号的唯一标识
			timestamp :'${weiXinVO.timestamp}', // 必填，生成签名的时间戳
			nonceStr : '${weiXinVO.nonceStr}', // 必填，生成签名的随机串
			signature :'${weiXinVO.signature}',// 必填，签名，见附录1
			 jsApiList: ['onMenuShareQZone',
				'onMenuShareTimeline',
				'onMenuShareAppMessage',
				'onMenuShareQQ',
				'onMenuShareWeibo',
				'hideMenuItems',
				'showMenuItems',
				'hideAllNonBaseMenuItem',
				'showAllNonBaseMenuItem',
				'translateVoice',
				'startRecord',
				'stopRecord',
				'onRecordEnd',
				'playVoice',
				'pauseVoice',
				'stopVoice',
				'uploadVoice',
				'downloadVoice',
				'chooseImage',
				'previewImage',
				'uploadImage',
				'downloadImage',
				'getNetworkType',
				'openLocation',
				'getLocation',
				'hideOptionMenu',
				'showOptionMenu',
				'closeWindow',
				'scanQRCode',
				'chooseWXPay',
				'openProductSpecificView',
				'addCard',
				'chooseCard',
				'openCard']
		// 必填，需要使用的JS接口列表，所有JS接口列表见附录2
		});

		wx.ready(function() {
			// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，
			// config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，
			// 则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，
			// 则可以直接调用，不需要放在ready函数中。

			wx.onMenuShareAppMessage({
				title : '要理财,来存吧!', // 分享标题
				desc : '来存吧票据理财,注册即送18888元理财金,新手宝7天年化收益率达20%!100万小伙伴的选择,让你的每笔财富增值!', // 分享描述
				link :shareurl, // 分享链接
				imgUrl : 'http://8.laicunba.com/h5/img/sharelogo.png', // 分享图标
				type : '', // 分享类型,music、video或link，不填默认为link
				dataUrl : '', // 如果type是music或video，则要提供数据链接，默认为空
				success : function() {
					// 用户确认分享后执行的回调函数
				},
				cancel : function() {
					// 用户取消分享后执行的回调函数
				}
			});

			wx.onMenuShareTimeline({
				title : '要理财,来存吧!来存吧票据理财,注册即送18888元理财金,新手宝7天年化收益率达20%!100万小伙伴的选择,让你的每笔财富增值!', // 分享标题
				link : shareurl, // 分享链接
				imgUrl : 'http://8.laicunba.com/h5/img/sharelogo.png', // 分享图标
				success : function() {
					// 用户确认分享后执行的回调函数
				},
				cancel : function() {
					// 用户取消分享后执行的回调函数
				}
			});
			
			wx.onMenuShareQQ({
				title: '要理财,来存吧!', // 分享标题
				desc: '来存吧票据理财,注册即送18888元理财金,新手宝7天年化收益率达20%!100万小伙伴的选择,让你的每笔财富增值!', // 分享描述
				link: shareurl, // 分享链接
				imgUrl: 'http://8.laicunba.com/h5/img/sharelogo.png', // 分享图标
				success : function() {
					// 用户确认分享后执行的回调函数
				},
				cancel : function() {
					// 用户取消分享后执行的回调函数
				}
			});
			
			wx.onMenuShareQZone({
				title: '要理财,来存吧!', // 分享标题
				desc: '来存吧票据理财,注册即送18888元理财金,新手宝7天年化收益率达20%!100万小伙伴的选择,让你的每笔财富增值!', // 分享描述
				link: shareurl, // 分享链接
				imgUrl: 'http://8.laicunba.com/h5/img/sharelogo.png', // 分享图标
				success : function() {
					// 用户确认分享后执行的回调函数
				},
				cancel : function() {
					// 用户取消分享后执行的回调函数
				}
			});

		}); 
	}); 
</script>

<style type="text/css">
*{ margin:0; padding:0; }
a{ color:#0a8cd2; text-decoration:none; outline: none;-webkit-tap-highlight-color:transparent;}
.clearfix:after{ content:"."; display:block; height:0; clear:both; visibility:hidden; }
.clearfix{ display:inline-block; }
.clearfix{ display:block; }
.clear{ clear:both; height:0; font:0/0 Arial; visibility:hidden; }
.none{ display:none }
body,html {
    max-width: 480px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    font-size: 18px;
    font-family: "微软雅黑";
    position: relative;
}
.mb-5 {
    margin-bottom: 5px;
}
img{
	box-sizing: border-box;
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	border: 0;
}
.flex {
	display: flex;
}
.flex-1 {
	flex: 1;
}
.jc-space-between {
	justify-content: space-between;
}
.jc-space-around {
    justify-content: space-around;
}
.jc-center {
	justify-content: center;
}
.ai-center {
	align-items: center;
}
.no-click {
    pointer-events: none;
}
.tab {
   width: 4.6rem;
   padding: 0.3rem 0;
   background: #fb6653;
   text-align: center;
   color: #FFF;
   border-radius: 0.8rem;
   position: relative;
   margin-bottom: 0.4rem;
}
.tab-active:after {
   position: absolute;
   width: 0.16rem;
   height: 0.50rem;
   background: #fb6653;
   left: 50%;
   bottom: -0.5rem;
   margin-left: -0.3rem;
   display: block;
   content: '';
}
.con-box {
   width: 9.4rem;
   margin: 0 auto;
   border-radius: 8px;
   background-color: #f9f9fd;
   box-sizing: border-box;
   color: #5d5d5d;
}
li {
   list-style: none;
}
.convert-item {
   width: 3.5rem;
   height: 3.56rem; 
   position: relative;
}
.btn-convert {
   width: 2.32rem;
   height: 0.85rem;
   position: absolute;
   left: 50%;
   margin-left: -1.16rem;
   bottom: 0.6rem;
}
.ver-top {
   vertical-align: top;
}
.act_rules {
   padding: 0 5px;
   color: #897df8;
}
.act_rules tr td {
   line-height: 1.5;
   font-size: 14px
}
.con-title {
   margin: 0.33rem; 
   text-align: center;
   font-size: 18px;
   color: #897df8;
}
.calc_invest{
	color: #5d5d5d;
	font-size: 12px;
	margin: 0.2rem 0 0.4rem 0;
}
.calc_invest input{
	width: 1.75rem;
	height: 0.94rem;
	border: 1px solid #ac5ac6;
	text-align: center;
	font-size: 14px !important;
	background: #cbccfe;
	color: #5d5d5d;
	-webkit-tap-highlight-color:rgba(0,0,0,0);
	border-radius: 4px;
}
input::-webkit-input-placeholder{
	color: #5d5d5d !important;
}
input:-moz-placeholder{
	color: #9a1d21 !important;
}
input:-moz-placeholder, textarea:-moz-placeholder {
　　 color: #5d5d5d !important;
}
input:-ms-placeholder{
	color: #5d5d5d !important;
}
.btn_act1,.btn_act2 {
    width: 4.2rem;
	height: 1.16rem;
	line-height: 1.16rem;
	border-radius: 0.5rem;	
	text-align: center;
	font-size: 16px;	
}
.btn_act1 {
    background-color: #fb6e5c;
	-webkit-box-shadow: inset 0 -7px 13px #fb452e;
	-moz-box-shadow: inset 0 -7px 13px #fb452e;
	box-shadow: inset 0 -7px 13px #fb452e;
	color: #FFF;
}
.btn_act2 {
	background-color: #fcd965;
	-webkit-box-shadow: inset 0 -7px 13px #ddb018;
	-moz-box-shadow: inset 0 -7px 13px #ddb018;
	box-shadow: inset 0 -7px 13px #ddb018;
	color: #f2442e;
}
.treasurebox {
    width: 5.5rem;
    margin: 0.68rem auto 0.28rem;
}
.tab_con {
    padding-bottom: 1.04rem;
}
.mask,.mask1 {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top: 0;
    background: rgba(0,0,0,0.6);
    z-index: 9;
    display: none;
}
.popup1, .popup2, .popup3 {
    width: 90%;
    position: fixed;
    left: 5%;
    top: 50%;
    padding: 0.68rem 0;
    z-index: 9;
    background: #FFF;
    text-align: center;
    border-radius: 12px;
    display: none;
}
.act_popup1, .act_popup2 {
    width: 90%;
    max-height: 500px;
    min-height: 300px;
    overflow: auto;
    color: #9a1d21;
    position: fixed;
    left: 5%;
    top: 50%;
    z-index: 9;
    background: #FFF;
    border-radius: 12px;
    box-sizing: border-box;
    display: none;
}
.act_close {
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
    height: 30px;
}
.btn_act2close {
    width: 1.72rem;  
    height: 0.8rem;  
    line-height: 0.8rem;
    margin: 0.8rem auto 0;
    color: #FFF;
    background: #fb6653;
    border-radius: 0.4rem;
}
.box_prize {
    position: absolute;
    width: 2.16rem;
    left: 50%;
    margin-left: -1.02rem;
    top: 0.82rem;
}
.light-pro {
    color: #fb6653;
    font-size: 16px;
    margin-top: 0.2rem;
}
.dark-pro {
    color: #686868;
    font-size: 14px;
    margin-top: 0.2rem;
}
.bill-tab {
	background: #FFF;
	color: #9a1d21;
	height: 1.12rem;
	line-height: 1.12rem;
	font-size: 16px;
}
.txt-left {
    text-align: left;
}
.txt-right {
    text-align: right;
}
.maskimg{
	position:fixed;
	left:0;
	top:0;
	z-index:100;
	display:none;
}
.maskimg img{
	width:93%;
}
.act-box1, .act-box2 {
    position: relative;
}
.actrecord {
    height: 120px;
    overflow: hidden;
}
.actrecord li {
    line-height: 24px;
}
.actrecord li:nth-child(even) {
    background: #fef3ce;
}
.actrecord li:nth-child(odd) {
    background: #fcf5dd;
}
.btn-exchange {
    position: absolute;
    right: 0;
    top: 10px;
    color: #5d5d5d;
    font-size: 14px;
    z-index: 8;
}
table{
	border-collapse:collapse;
}
.winlist td {
    border-bottom: 1px solid #c6c6c7;
}
.winlist2 td {
    line-height: 30px;
}
.winlist td.txt-left {
    padding-left: 10%;
}
.winlist td.txt-right {
    padding-right: 10%;
}
</style>
</head>
<body>
<div class="" style="background: #cbccfe;">
     <div style="width: 100%;text-align: center;margin-bottom: 0.9rem;"><img src="http://laicunba.b0.upaiyun.com/lcb/activity/fifty_header.jpg"></div>
     <div class="tab_wrap flex jc-space-between ai-center" style="width: 9.4rem;margin: 0 auto;">
          <a class="tab tab-active" href="#tab0">
             <p>福利第一趴</p>
             <p>破50亿 超值福利速来领</p>
          </a>
          <a class="tab" href="#tab1">
             <p>福利第二趴</p>
             <p>破50亿 感恩红包任性送</p>
          </a>
          </a>
     </div>
     <div class="tab_con">
          <div class="act-start1">
	          <div class="con-box act-box1" style="min-height: 500px;padding: 0.24rem 0.3rem;">
	               <div style="line-height: 1.5;font-size: 14px;">积分计算器:投资15天以上项目即可获得积分</div>
	               <div class="calc_invest flex ai-center">
						<input type="number" id="input_amount" placeholder="投资本金" />&nbsp;&nbsp;*&nbsp;&nbsp; 
						<input type="number" id="input_period" placeholder="投资天数" />&nbsp;/365=&nbsp;
						<input type="number" id="compute_result" readonly="readonly" placeholder="" />&nbsp;积分
					</div>
					<div class="flex jc-space-between" style="font-size: 14px;">
	                    <div class="myCurrentVcoin">当前积分： <span class="my_anniversary_vcoin">8888</span></div>
	                    <div class="mygift">我的礼品》</div>
	               </div>
					<div class="boxcon1">
					     <div class="treasurebox"><img src="img/bronze_box0905.png"></div>
					     <div class="flex jc-space-around">
					          <div style="text-align: center;">
					               <div class="mb-5">300积分可开启</div>
					               <div class="btn_act1 btn_openbox" data-type="001">开启宝箱</div>
					          </div>
					          <div style="text-align: center;">
					               <div class="mb-5">邀友开启宝箱机会：1</div>
					               <div class="btn_act1 btn-invite">邀请好友</div>
					          </div>
					     </div>
					</div>
					<div class="boxcon2">
					     <div class="treasurebox"><img src="img/silver_box0905.png"></div>
					     <div class="flex jc-center">
					          <div style="text-align: center;">
					               <div class="mb-5">5888积分可开启</div>
					               <div class="btn_act1 btn_openbox" data-type="002">开启宝箱</div>
					          </div>
					     </div>
					</div>
					<div class="boxcon3">
					     <div class="treasurebox"><img src="img/gold_box0905.png"></div>
					     <div class="flex jc-center">
					          <div style="text-align: center;">
					               <div class="mb-5">20000积分可开启</div>
					               <div class="btn_act1 btn_openbox" data-type="003">开启宝箱</div>
					          </div>
					     </div>
					</div>
					<div class="boxcon4" style="margin-bottom: 0.44rem;">
					     <div class="treasurebox"><img src="img/silver_box40905.png"></div>
					     <div class="flex jc-center">
					          <div style="text-align: center;">
					               <div class="mb-5">50000积分可开启</div>
					               <div class="btn_act1 btn_openbox" data-type="004">开启宝箱</div>
					          </div>
					     </div>
					</div>
	          </div>
	          <div class="con-box" style="margin-top: 0.54rem;margin-bottom: 0.6rem;padding: 10px 0.3rem 20px;">
	               <div class="con-title">活动规则</div>
	               <table class="act_rules">
	                   <tr>
	                       <td class="ver-top">1、</td>
	                       <td>用户通过投资银票宝＞15天以上项目，即可获得对应积分，积分=投资本额×天数÷365。满足一定条件的积分可开启相应宝箱，随机获取该宝箱内的礼品。</td>
	                   </tr>
	                   <tr>
	                       <td class="ver-top">2、</td>
	                       <td>活动期间内注册用户免费获得一次开铜宝箱的机会；用户成功邀请一位好友注册并且首次投资任意标的（随存宝除外），可获得一次开启铜宝箱的机会。</td>
	                   </tr>
	                   <tr>
	                       <td class="ver-top">3、</td>
	                       <td>开宝箱的机会在活动结束后自动清零，请及时使用。 </td>
	                   </tr>
	                   <tr>
	                       <td class="ver-top">4、</td>
	                       <td>红包使用说明 
	                           <table style="color: #897df8;">
	                                <tr>
	                                    <td class="ver-top">①</td>
	                                    <td>5元、10元、30元、50元现金券：有效期30天，30天以上满1500元使用;</td>
	                                </tr>
	                                <tr>
	                                    <td class="ver-top">②</td>
	                                    <td>55元、70元、210元、300元、400元、750元、888元现金券：有效期30天，30天以上满1000元使用;</td>
	                                </tr>
	                           </table>   
	                       </td>
	                   </tr>
	                   <tr>
	                       <td class="ver-top">5、</td>
	                       <td>红包将在抽中后自动发送您的红包账户中；京东E卡将于活动结束后10个工作日内以短信电子卡形式发送到您的注册手机号中,问题受理时间截止10月07号；实物奖励将于活动结束后10个工作日内由客服联系，并获取您的收货地址，为您安排寄出。</td>
	                   </tr>
	                   <tr>
	                       <td class="ver-top">6、</td>
	                       <td>活动最终解释权归来存吧所有</td>
	                   </tr>
	               </table>
	          </div>
	      </div>
     </div>
     <div class="tab_con none">
          <div class="act-start2">
	          <div class="con-box act-box2" style="padding: 0.24rem 0.3rem;">
	               <div class="btn-exchange">兑换记录》</div>
	               <div class="turn" style="width: 8.28rem;margin: 0.45rem auto;position: relative;">
	                    <img class="run-turn" src="img/fifty_purse0905.png">
	                    <div style="position: absolute;left: 0;top: 5.0rem;width: 8.28rem;"> 
	                         <div class="btn_clickme" style="width: 4.5rem;height: 1.2rem;line-height: 1.2rem;text-align: center;color: #e13a23;font-size: 16px;margin: 0 auto;background: #ffe281;border-radius: 1.2rem;">点我</div>
	                         <div style="color: #ffe281;text-align: center;margin-top: 0.6rem;">随机领取5-100元红包额度</div>
	                    </div>
	               </div>
	               <div class="flex jc-space-around">
			            <div style="text-align: center;">
			                 <div class="mb-5">抽奖机会： 222</div>
			                 <div class="btn_act2 btn-invite">邀请好友</div>
			            </div>
			            <div style="text-align: center;">
			                 <div class="mb-5">叠加红包：1200</div>
			                 <div class="btn_act2 btn_exchange">立即兑换</div>
			            </div>
			       </div>
	               <div style="margin: 0.9rem 0.3rem;padding: 0.54rem 0.3rem;text-align:center;background: #fef3ce;">
	                    <div style="margin-bottom: 15px;">最新兑换记录</div>
	                    <ul class="actrecord">
	                        <li>用户188****5568刚刚兑换了100元现金红包</li>
	                        <li>用户188****5568刚刚兑换了100元现金红包</li>
	                        <li>用户188****5568刚刚兑换了100元现金红包</li>
	                        <li>用户188****5568刚刚兑换了100元现金红包</li>
	                        <li>用户188****5568刚刚兑换了100元现金红包</li>
	                        <li>用户188****5568刚刚兑换了100元现金红包</li>
	                        <li>用户188****5568刚刚兑换了100元现金红包</li>
	                        <li>用户188****5568刚刚兑换了100元现金红包</li>
	                        <li>用户188****5568刚刚兑换了100元现金红包</li>
	                        <li>用户188****5568刚刚兑换了100元现金红包</li>
	                    </ul>
	               </div>
	          </div>
	          <div class="con-box" style="margin-top: 0.54rem;margin-bottom: 0.6rem;padding: 10px 0.3rem 20px;">
	               <div class="con-title">活动规则</div>
	               <table class="act_rules">
	                   <tr>
	                       <td class="ver-top">1、</td>
	                       <td>活动期间内成功邀请一位好友注册并且首次投资任意标的（随存宝除外），邀请人可获得一次领取随机红包额度的机会。 </td>
	                   </tr>
	                   <tr>
	                       <td class="ver-top">2、</td>
	                       <td>此环节中领取到的红包可叠加至上限100元兑换为一张来进行使用，举个例子：我领取到30元，我再领取到75元，可以自动叠加到兑换生成100元，剩余5元自动算进第二张红包，可继续叠加，到上限100元领取；</td>
	                   </tr>
	                   <tr>
	                       <td class="ver-top">3、</td>
	                       <td>开宝箱的机会在活动结束后自动清零，请及时使用； </td>
	                   </tr>
	                   <tr>
	                       <td class="ver-top">4、</td>
	                       <td>红包使用条件：15天有效期，20天以上满1000元可使用；</td>
	                   </tr>
	                   <tr>
	                       <td class="ver-top">5、</td>
	                       <td>红包将在兑换后自动发送到您的红包账户中；</td>
	                   </tr>
	                   <tr>
	                       <td class="ver-top">6、</td>
	                       <td>本活动最终解释权归来存吧所有。</td>
	                   </tr>
	                  
	               </table>
	          </div>
          </div>
     </div>
</div>
<div class="mask"></div>
<div class="mask1"></div>
<!-- - 第一个活动弹窗 - -->
<div class="popup1" style="display: none;">  
     <div class="light-pro">恭喜您获得210元现金券</div>
     <div class="dark-pro">请至“我的红包”查看</div>
     <!-- <div>当前积分不足</div> -->
     <!-- <div class="dark-pro">将以短信形式发送</div> -->
     <!-- <div class="dark-pro">投资或邀请好友赢取积分</div> -->
     <div style="position: relative;margin: 0.52rem auto 0;width: 4.05rem;">
          <img src="img/fifty_silver_open1.png">
          <div class="box_prize"><img src="img/fifty_jd_200.png"></div>
     </div>
     <div class="btn_act2close">好的</div>
</div>
<!-- - 第一个活动的奖品清单弹框 - -->
<div class="act_popup1">
     <div class="act_close"><img src="img/btn-close.png"></div>
     <div style="text-align: center;margin: 20px;font-size: 18px;">我的奖品</div>
     <div class="flex bill-tab" style="padding: 0 10%;">
		 <div class="flex-1 txt-left">我的奖品</div>
		 <div class="flex-1 txt-right">消耗积分/时间</div>
	 </div>
	 <table class="winlist" style="width: 100%;line-height: 1.5;">	
	    <tr>
			<td class="txt-left">无人机</td>
			<td class="txt-right">
				<div>300积分</div>
	            <div>2017-09-05 20:51</div>
	        </td>
		</tr> 
		<tr>
			<td colspan="2" style="font-size: 18px;color: #555;text-align: center; padding:20px 0;border: none;">您还没有获得奖励哦，<br/>赶快来参加吧!</td>
		</tr>
	 </table>
</div>
<!-- - 第二个活动的点我按钮弹框 - -->
<div class="popup2" style="display: none;">  
     <div><img src="img/fifty_drawwin.png" style="width: 60px;"></div>
     <div class="light-pro">恭喜您抽中20元额度红包</div>
     <div class="dark-pro">（红包最好叠加兑换，更换算<img src="img/fifty_occur.png" style="width: 20px;">）</div>
     <!-- <div class="light-pro">您还未获得抽奖机会哦，<br/>快去邀请好友注册投资吧~</div> -->
     <div class="btn_act2close">好的</div>
</div>
<!-- - 第二个活动的兑换按钮弹框 - -->
<div class="popup3" style="display: none;">  
     <div><img src="img/fifty_drawwin.png" style="width: 60px;"></div>
     <!-- <div class="light-pro">您还未获得红包额度哦，<br/>快去邀请好友注册投资<br/>获取抽奖机会吧~</div> -->
     <div class="light-pro">恭喜您兑换了2张100元红包!<br/>剩余红包： 20</div>
     <div class="btn_act2close">好的</div>
</div>
<!-- - 第二个活动的兑奖记录弹框 - -->
<div class="act_popup2">
     <div class="act_close"><img src="img/btn-close.png"></div>
     <div style="text-align: center;margin: 20px;font-size: 18px;">兑奖记录</div>
     <div class="flex bill-tab" style="padding: 0 10%;">
		 <div class="flex-1 txt-left">兑换现金券</div>
		 <div class="flex-1 txt-right">兑换时间</div>
	 </div>
	 <table class="winlist winlist2" style="width: 100%;line-height: 1.5;">
	    <tr>
			<td class="txt-left">100元现金券</td>
			<td class="txt-right">2017-09-05 20:51</td>
		</tr> 
		<tr>
			<td class="txt-left">100元现金券</td>
			<td class="txt-right">2017-09-05 20:51</td>
		</tr> 
		<tr>
			<td class="txt-left">100元现金券</td>
			<td class="txt-right">2017-09-05 20:51</td>
		</tr> 
		<tr>
			<td class="txt-left">100元现金券</td>
			<td class="txt-right">2017-09-05 20:51</td>
		</tr> 
		<tr>
			<td class="txt-left">100元现金券</td>
			<td class="txt-right">2017-09-05 20:51</td>
		</tr> 
		<tr>
			<td class="txt-left">100元现金券</td>
			<td class="txt-right">2017-09-05 20:51</td>
		</tr> 
		<tr>
			<td class="txt-left">100元现金券</td>
			<td class="txt-right">2017-09-05 20:51</td>
		</tr> 
		<tr>
			<td class="txt-left">100元现金券</td>
			<td class="txt-right">2017-09-05 20:51</td>
		</tr> 
		<tr>
			<td class="txt-left">100元现金券</td>
			<td class="txt-right">2017-09-05 20:51</td>
		</tr> 
		<tr>
			<td class="txt-left">100元现金券</td>
			<td class="txt-right">2017-09-05 20:51</td>
		</tr> 
		<tr>
			<td class="txt-left">100元现金券</td>
			<td class="txt-right">2017-09-05 20:51</td>
		</tr> 
		<tr>
			<td class="txt-left">100元现金券</td>
			<td class="txt-right">2017-09-05 20:51</td>
		</tr> 
		<tr>
			<td class="txt-left">100元现金券</td>
			<td class="txt-right">2017-09-05 20:51</td>
		</tr> 
		<tr>
			<td class="txt-left">100元现金券</td>
			<td class="txt-right">2017-09-05 20:51</td>
		</tr> 
		<tr>
			<td colspan="2" style="font-size: 18px;color: #555;text-align: center; padding:20px 0;border: none;">您还没有获得奖励哦，<br/>赶快来参加吧!</td>
		</tr>
	 </table>
</div>

<!-- - 分享提示框 - -->
<div class="maskimg">
	 <img src="img/maskimg.png" />
</div>
<script>  
$(function(){
    var hash = location.hash;
    if(hash){
        tab(hash.match(/\d+/)[0]);
    };
    $(".tab").click(function(){
    	tab($(this).index());
    })
    function tab(index){
        $('.tab_con').siblings('.tab_con').hide().end().eq(index).show();
        $(".tab").eq(index).addClass("tab-active").siblings().removeClass("tab-active");
    };
    
  //将弹出框垂直居中
    function popupHeight(selector){
    	var popupHeight = $(selector).outerHeight();
    	if(popupHeight == 500) {
    		$(selector).css({
            	"marginTop": "-250px"
            });
    	} else {
    		$(selector).css({
            	"marginTop": "-" + popupHeight/2 + "px"
            });
    	}
    	
    };
    $(".mygift").click(function(){
    	popupHeight(".act_popup1");
    	$(".act_popup1,.mask").show();	
    });
    $(".btn-exchange").click(function(){
    	popupHeight(".act_popup2");
    	console.log($(".act_popup2").height())
    	$(".act_popup2,.mask").show();	
    });
    $(".act_close").click(function(){
    	$(".act_popup1,.mask,.act_popup2").hide();
    });
    
  //邀请好友按钮 遮罩层为mask1
    $(".btn-invite").click(function(){
    	$(".mask1,.maskimg").show();
    });
    $(".mask1").click(function(){
    	$(".mask1,.maskimg").hide();
    });
    
 //活动一开启宝箱按钮
    $(".btn_openbox").click(function(){
    	popupHeight(".popup1");
    	$(".mask,.popup1").show();
    }); 
  //活动二 点击点我按钮 
    $(".btn_clickme").click(function(){
    	popupHeight(".popup2");
    	$(".mask,.popup2").show();
    });
 //活动二 点击立即兑换按钮 
    $(".btn_exchange").click(function(){
    	popupHeight(".popup3");
    	$(".mask,.popup3").show();
    });
    $(".btn_act2close").click(function(){
    	$(".mask,.popup1,.popup2,.popup3").hide();
    });
 // 计算获得积分
   	$("#input_amount,#input_period").on("focus blur keyup",function(){
   		var input_amount = $("#input_amount").val();
       	var input_period = $("#input_period").val();
   		if (input_amount!='' && input_period!='') {
    		input_amount = Number(input_amount);
        	input_period = Number(input_period);
       	    $("#compute_result").val(Math.round(input_amount * input_period / 365));
   		}
   	});
    //兑换记录列表自动滚动
    function scrollExchange(){
    	var ulList = $(".actrecord");
    	var liFirst = ulList.find("li:first");
    	var liHeight = liFirst.height();
    	liFirst.animate({
    		height: 0
    	},400,function(){
    		liFirst.css({
    			'height': liHeight
    		}).appendTo(ulList);
    	})
    };
    var scrollTimer;
    $(".actrecord").hover(function(){
    	clearInterval(scrollTimer)
    },function(){
    	scrollTimer = setInterval(function(){
    		scrollExchange()
    	},2000)
    }).trigger("mouseleave");
})
    	
    	
    
</script>
</body>
</html>